---
{
	"title": "JSON Manager",
	"language": "en",
	"category": "Plugins",
	"description": "Manage dataset and apply JSON Patch",
	"tag": "jsonmanager",
	"parentdir": "wb-jsonmanager",
	"altLangPage": "jsonmanager-fr.html",
	"dateModified": "2025-03-19"
}
---
<!--
<ul class="list-inline">
	<li><a class="btn btn-primary" href="jsonmanager-doc-en.html">Documentation</a></li>
	<li><a class="btn btn-primary" href="https://github.com/wet-boew/GCWeb/issues/new?title=JSON%20Manager">Questions or comments?</a></li>
</ul>
-->

<ul>
	<li>Main example</li>
	<li><a href="multisource-en.html">Multiple data source to render a data table</a></li>
</ul>
<div class="wb-prettify all-pre"></div>
<p>Manage dataset and apply JSON Patch.</p>

<h2>Applying patch</h2>

<h3>Example 1</h3>

<div data-wb-jsonmanager='{
	"url": "demo/data-en.json",
	"name": "example1",
	"patches": [
		{ "op": "wb-count", "path": "/products", "set": "/nbproduct" },
		{ "op": "copy", "from": "/products/0", "path": "/product"},
		{ "op": "wb-nbtolocal", "path": "/price", "prefix": "$" }
	]
}'></div>
<p>There is <span data-json-replace="#[example1]/nbproduct">unknown number of</span> products costing <span data-json-replace="#[example1]/price">(N/A)</span> each.</p>
<p>My first product is <span data-json-replace="#[example1]/product">(unknown)</span> and the original product was <span data-json-replace="demo/data-en.json#/product">(unknown)</span>.</p>

<div data-wb-jsonmanager='{
	"url": "demo/data-en.json#/level1/level2",
	"name": "example2",
	"patches": [
		{ "op": "wb-toDateISO", "path": "/itm1" }
	]
}'>
	<p>Patch an array of object:</p>
	<ul data-wb-json='{
		"url": "#[example2]",
		"mapping": [
			{ "selector": "li", "value": "/itm1" }
		]
	}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

<details>
	<summary>View source code</summary>

	<h4>HTML</h4>
	<pre><code>&lt;div data-wb-jsonmanager='{
		&quot;url&quot;: &quot;demo/data-en.json&quot;,
		&quot;name&quot;: &quot;example1&quot;,
		&quot;patches&quot;: [
			{ &quot;op&quot;: &quot;wb-count&quot;, &quot;path&quot;: &quot;/products&quot;, &quot;set&quot;: &quot;/nbproduct&quot; },
			{ &quot;op&quot;: &quot;copy&quot;, &quot;from&quot;: &quot;/products/0&quot;, &quot;path&quot;: &quot;/product&quot;},
			{ &quot;op&quot;: &quot;wb-nbtolocal&quot;, &quot;path&quot;: &quot;/price&quot;, &quot;prefix&quot;: &quot;$&quot; }
		]
	}'&gt;&lt;/div&gt;
&lt;p&gt;There is &lt;span data-json-replace=&quot;#[example1]/nbproduct&quot;&gt;unknown number of&lt;/span&gt; products costing &lt;span data-json-replace=&quot;#[example1]/price&quot;&gt;(N/A)&lt;/span&gt; each.&lt;/p&gt;
&lt;p&gt;My first product is &lt;span data-json-replace=&quot;#[example1]/product&quot;&gt;(unknown)&lt;/span&gt; and the original product was &lt;span data-json-replace=&quot;demo/data-en.json#/product&quot;&gt;(unknown)&lt;/span&gt;.&lt;/p&gt;

&lt;div data-wb-jsonmanager='{
		&quot;url&quot;: &quot;demo/data-en.json#/level1/level2&quot;,
		&quot;name&quot;: &quot;example2&quot;,
		&quot;patches&quot;: [
			{ &quot;op&quot;: &quot;wb-toDateISO&quot;, &quot;path&quot;: &quot;/itm1&quot; }
		]
	}'&gt;
	&lt;p&gt;Patch an array of object:&lt;/p&gt;
	&lt;ul data-wb-json='{
			&quot;url&quot;: &quot;#[example2]&quot;,
			&quot;mapping&quot;: [
				{ &quot;selector&quot;: &quot;li&quot;, &quot;value&quot;: &quot;/itm1&quot; }
			]
		}'&gt;
		&lt;template&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/template&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>

	<h4>File <code>demo/data-en.json</code></h4>
	<pre><code>{
	"product": "Hello world",
	"products": [
		"My first product",
		"My second product",
		"My third product",
		"My forth product"
	],
	"level1": {
		"level2": [
			{
				"itm1": "2016-11-30T07:53:56Z"
			},
			{
				"itm1": "2017-02-01T16:52:00Z"
			},
			{
				"itm1": "2013-09-08T14:14:14Z"
			}
		]
	},
	"price": 1234.98
}</code></pre>
</details>

<h3>Example 2</h3>
<p>This example leverages the following patches: <code>patches</code>, <code>wb-swap</code> and <code>wb-toDateISO</code>.</p>

<div data-wb-jsonmanager='{
	"name": "swapEx",
	"url": [ "demo/events.json#/data/eventList", "demo/events-i18n.json" ],
	"patches": [
		{ "op": "patches", "path": "/items", "patches": [
			{ "op": "wb-swap", "path": "/eventLanguage", "ref": "/reference/language/{{page.language}}" },
			{ "op": "wb-swap", "path": "/province", "ref": "/reference/province/{{page.language}}" },
			{ "op": "wb-swap", "path": "/registrationStatus", "ref": "/reference/registrationStatus" },
			{ "op": "wb-toDateISO", "path": "/startDate" },
			{ "op": "wb-toDateISO", "path": "/endDate" },
			{ "op": "patches", "path": "/registeredPeople", "patches": [
				{ "op": "wb-swap", "path": "/prefLang", "ref": "/reference/language/{{page.language}}" }
			] }
		] }
	]
}'>
	<div data-wb-json='{
		"url": "#[swapEx]/items",
		"mapping": [
			{ "selector": "h4", "value": "/{{page.language}}title" },
			{ "selector": ".event-description", "value": "/{{page.language}}description/html", "isHTML": "true" },
			{ "selector": ".event-language", "value": "/eventLanguage" },
			{ "selector": ".event-start", "value": "/startDate" },
			{ "selector": ".event-end", "value": "/endDate" },
			{ "selector": ".event-location", "value": "/city" },
			{ "selector": ".event-status", "value": "/registrationStatus/{{page.language}}" },
			{ "selector": ".event-provinces", "value": "/province", "queryall": "li" },
			{ "selector": ".event-registered", "value": "/registeredPeople",
				"mapping": [
					{ "selector": "[data-language]", "value": "/prefLang" },
					{ "selector": "[data-name]", "value": "/name" }
				]
			}
		]
	}'>
		<template>
			<div>
				<h4></h4>
				<div class="event-description"></div>
				<p>Language: <span class="event-language"></span></p>
				<p>From <span class="event-start"></span> to <span class="event-end"></span></p>
				<p>Location: <span class="event-location"></span></p>
				<p>Status: <span class="event-status"></span></p>
				<p>Province(s):</p>
				<ul class="event-provinces">
					<template>
						<li></li>
					</template>
				</ul>
				<p>Registered:</p>
				<ul class="event-registered">
					<template>
						<li><span data-name></span> (<span data-language></span>)</li>
					</template>
				</ul>
			</div>
		</template>
	</div>
</div>

<details>
	<summary>View source code</summary>

	<h4>HTML</h4>
	<pre><code>&lt;div data-wb-jsonmanager='{
	"name": "swapEx",
	"url": [ "demo/events.json#/data/eventList", "demo/events-i18n.json" ],
	"patches": [
		{ "op": "patches", "path": "/items", "patches": [
			{ "op": "wb-swap", "path": "/eventLanguage", "ref": "/reference/language/{{page.language}}" },
			{ "op": "wb-swap", "path": "/province", "ref": "/reference/province/{{page.language}}" },
			{ "op": "wb-swap", "path": "/registrationStatus", "ref": "/reference/registrationStatus" },
			{ "op": "wb-toDateISO", "path": "/startDate" },
			{ "op": "wb-toDateISO", "path": "/endDate" },
			{ "op": "patches", "path": "/registeredPeople", "patches": [
				{ "op": "wb-swap", "path": "/prefLang", "ref": "/reference/language/{{page.language}}" }
			] }
		] }
	]
}'>
	&lt;div data-wb-json='{
		"url": "#[swapEx]/items",
		"mapping": [
			{ "selector": "h4", "value": "/{{page.language}}title" },
			{ "selector": ".event-description", "value": "/{{page.language}}description/html", "isHTML": "true" },
			{ "selector": ".event-language", "value": "/eventLanguage" },
			{ "selector": ".event-start", "value": "/startDate" },
			{ "selector": ".event-end", "value": "/endDate" },
			{ "selector": ".event-location", "value": "/city" },
			{ "selector": ".event-status", "value": "/registrationStatus/{{page.language}}" },
			{ "selector": ".event-provinces", "value": "/province", "queryall": "li" },
			{ "selector": ".event-registered", "value": "/registeredPeople",
				"mapping": [
					{ "selector": "[data-language]", "value": "/prefLang" },
					{ "selector": "[data-name]", "value": "/name" }
				]
			}
		]
	}'>
		&lt;template>
			&lt;div>
				&lt;h4>&lt;/h4>
				&lt;div class="event-description">&lt;/div>
				&lt;p>Language: &lt;span class="event-language">&lt;/span>&lt;/p>
				&lt;p>From: &lt;span class="event-start">&lt;/span> to &lt;span class="event-end">&lt;/span>&lt;/p>
				&lt;p>Location: &lt;span class="event-location">&lt;/span>&lt;/p>
				&lt;p>Status: &lt;span class="event-status">&lt;/span>&lt;/p>
				&lt;p>Province(s):&lt;/p>
				&lt;ul class="event-provinces">
					&lt;template>
						&lt;li>&lt;/li>
					&lt;/template>
				&lt;/ul>
				&lt;p>Registered:&lt;/p>
				&lt;ul class="event-registered">
					&lt;template>
						&lt;li>&lt;span data-name>&lt;/span> (&lt;span data-language>&lt;/span>)&lt;/li>
					&lt;/template>
				&lt;/ul>
			&lt;/div>
		&lt;/template>
	&lt;/div>
&lt;/div></code></pre>

	<h4>File <code>demo/events.json</code></h4>
	<pre><code>{
	"data": {
		"eventList": {
			"items": [
				{
					"entitle": "Event #1",
					"frtitle": "Évènement #1",
					"endescription": {
						"html": "&lt;p>This is a big description&lt;/p>\n"
					},
					"frdescription": {
						"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "english",
					"province": [
						"alberta",
						"manitoba",
						"new_brunswick",
						"ontario"
					],
					"city": "Online",
					"registrationStatus": "open",
					"registeredPeople": [
						{
							"name": "John Smith",
							"prefLang": "english"
						},
						{
							"name": "Jimmy Neutron",
							"prefLang": "english"
						}
					]
				},
				{
					"entitle": "Event #2",
					"frtitle": "Évènement #2",
					"endescription": {
						"html": "&lt;p>This is a big description&lt;/p>\n"
					},
					"frdescription": {
						"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "english",
					"province": [
						"british_columbia"
					],
					"city": "Vancouver",
					"registrationStatus": "open",
					"registeredPeople": [
						{
							"name": "Debbie Stark",
							"prefLang": "english"
						}
					]
				},
				{
					"entitle": "Event #3",
					"frtitle": "Évènement #3",
					"endescription": {
						"html": "&lt;p>This is a big description&lt;/p>\n"
					},
					"frdescription": {
						"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
					},
					"startDate": "2023-04-04T10:30:00.000-04:00",
					"endDate": "2023-04-06T10:30:06.000-04:00",
					"eventLanguage": "french",
					"province": [
						"quebec"
					],
					"city": "Ottawa",
					"registrationStatus": "closed",
					"registeredPeople": [
						{
							"name": "Pierre Tremblay",
							"prefLang": "french"
						},
						{
							"name": "Marc Gagnon",
							"prefLang": "french"
						},
						{
							"name": "Robert Côté",
							"prefLang": "french"
						}
					]
				}
			]
		}
	}
}</code></pre>

	<h4>File <code>demo/events-i18n.json</code></h4>
	<pre><code>{
	"reference": {
		"language": {
			"en": {
				"english": "English",
				"french": "French"
			},
			"fr": {
				"english": "Anglais",
				"french": "Français"
			}
		},
		"province": {
			"en": {
				"alberta": "Alberta",
				"british_columbia": "British Columbia",
				"manitoba": "Manitoba",
				"new_brunswick": "New Brunswick",
				"newfoundland_labrador": "Newfoundland &amp; Labrador",
				"northwest_territories": "Northwest Territories",
				"nova_scotia": "Nova Scotia",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"prince_edward_island": "Prince Edward Island",
				"quebec": "Quebec",
				"saskatchewan": "Saskatchewan",
				"yukon": "Yukon"
			},
			"fr": {
				"alberta": "Alberta",
				"british_columbia": "Colombie-Britannique",
				"prince_edward_island": "Île-du-Prince-Édouard",
				"manitoba": "Manitoba",
				"new_brunswick": "Nouveau-Brunswick",
				"nova_scotia": "Nouvelle-Écosse",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"quebec": "Québec",
				"saskatchewan": "Saskatchewan",
				"newfoundland_labrador": "Terre-Neuve-et-Labrador",
				"northwest_territories": "Territoires du Nord-Ouest",
				"yukon": "Yukon"
			}
		},
		"registrationStatus": {
			"en": {
				"open": "Open",
				"closed": "Closed"
			},
			"fr": {
				"open": "Ouvert",
				"closed": "Fermé"
			}
		}
	}
}</code></pre>

	<h4>JSON Output</h4>
	<pre><code>{
	"items": [
		{
			"entitle": "Event #1",
			"frtitle": "Évènement #1",
			"endescription": {
				"html": "&lt;p>This is a big description&lt;/p>\n"
			},
			"frdescription": {
				"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "English",
			"province": [
				"Alberta",
				"Manitoba",
				"New Brunswick",
				"Ontario"
			],
			"city": "Online",
			"registrationStatus": "Open"
		},
		{
			"entitle": "Event #2",
			"frtitle": "Évènement #2",
			"endescription": {
				"html": "&lt;p>This is a big description&lt;/p>\n"
			},
			"frdescription": {
				"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "English",
			"province": [
				"British Columbia"
			],
			"city": "Vancouver",
			"registrationStatus": "Open"
		},
		{
			"entitle": "Event #3",
			"frtitle": "Évènement #3",
			"endescription": {
				"html": "&lt;p>This is a big description&lt;/p>\n"
			},
			"frdescription": {
				"html": "&lt;p>Ceci est une grosse description&lt;/p>\n"
			},
			"startDate": "2023-04-04",
			"endDate": "2023-04-06",
			"eventLanguage": "French",
			"province": [
				"Quebec"
			],
			"city": "Ottawa",
			"registrationStatus": "Closed"
		}
	],
	"reference": {
		"language": {
			"en": {
				"english": "English",
				"french": "French"
			},
			"fr": {
				"english": "Anglais",
				"french": "Français"
			}
		},
		"province": {
			"en": {
				"alberta": "Alberta",
				"british_columbia": "British Columbia",
				"manitoba": "Manitoba",
				"new_brunswick": "New Brunswick",
				"newfoundland_labrador": "Newfoundland &amp; Labrador",
				"northwest_territories": "Northwest Territories",
				"nova_scotia": "Nova Scotia",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"prince_edward_island": "Prince Edward Island",
				"quebec": "Quebec",
				"saskatchewan": "Saskatchewan",
				"yukon": "Yukon"
			},
			"fr": {
				"alberta": "Alberta",
				"british_columbia": "Colombie-Britannique",
				"prince_edward_island": "Île-du-Prince-Édouard",
				"manitoba": "Manitoba",
				"new_brunswick": "Nouveau-Brunswick",
				"nova_scotia": "Nouvelle-Écosse",
				"nunavut": "Nunavut",
				"ontario": "Ontario",
				"quebec": "Québec",
				"saskatchewan": "Saskatchewan",
				"newfoundland_labrador": "Terre-Neuve-et-Labrador",
				"northwest_territories": "Territoires du Nord-Ouest",
				"yukon": "Yukon"
			}
		},
		"registrationStatus": {
			"en": {
				"open": "Open",
				"closed": "Closed"
			},
			"fr": {
				"open": "Ouvert",
				"closed": "Fermé"
			}
		}
	}
}</code></pre>
</details>

<h3>Example 3</h3>
<p>This example shows an advanced configuration of loading multiple data sources and inserting them into specific locations within the JSON manager dataset.</p>

<div data-wb-jsonmanager='{
	"name": "mappingDataSource",
	"url": [
		"demo/data-en.json",
		{
			"url": "demo/data-fr.json#/produits",
			"path": "/français/liste"
		}
	]
}'></div>

<div class="row">
	<div class="col-md-6">
		<p>List of English products</p>
		<ul data-wb-json='{
			"url": "#[mappingDataSource]/products",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			<template>
				<li></li>
			</template>
		</ul>
	</div>
	<div class="col-md-6">
		<p>List of French products</p>
		<ul lang="fr" data-wb-json='{
			"url": "#[mappingDataSource]/français/liste",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			<template>
				<li></li>
			</template>
		</ul>
	</div>
</div>

<details>
	<summary>Source code</summary>
	<pre><code>&lt;div data-wb-jsonmanager='{
	"name": "mappingDataSource",
	"url": [
		"demo/data-en.json",
		{
			"url": "demo/data-fr.json#/produits",
			"path": "/français/liste"
		}
	]
}'>&lt;/div>

&lt;div class="row">
	&lt;div class="col-md-6">
		&lt;p>List of English products&lt;/p>
		&lt;ul data-wb-json='{
			"url": "#[mappingDataSource]/products",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			&lt;template>
				&lt;li>&lt;/li>
			&lt;/template>
		&lt;/ul>
	&lt;/div>
	&lt;div class="col-md-6">
		&lt;p>List of French products&lt;/p>
		&lt;ul lang="fr" data-wb-json='{
			"url": "#[mappingDataSource]/français/liste",
			"mapping": [
				{ "selector": "li" }
			]
		}'>
			&lt;template>
				&lt;li>&lt;/li>
			&lt;/template>
		&lt;/ul>
	&lt;/div>
&lt;/div></code></pre>
</details>

<h2>Displaying result from a JSON RESTful API</h2>

<details>
	<summary>View source code</summary>

	<p>Consult the JSON RESTful API github result: <a href="https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility">https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility</a></p>

	<pre><code>&lt;h3&gt;Work Accessibility issue &lt;small&gt;WET-BOEW on GitHub&lt;/small&gt;&lt;/h3&gt;

&lt;div class=&quot;row&quot;&gt;
&lt;aside id=&quot;aside&quot; class=&quot;col-md-8 col-md-push-2 well&quot; data-wb-jsonmanager='{
		&quot;url&quot;: &quot;https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility&quot;,
		&quot;name&quot;: &quot;github&quot;,
		&quot;patches&quot;: [
			{ &quot;op&quot;: &quot;wb-count&quot;, &quot;path&quot;: &quot;/rootArray&quot;, &quot;set&quot;: &quot;/nbissues&quot; },
			{ &quot;op&quot;: &quot;wb-last&quot;, &quot;path&quot;: &quot;/rootArray&quot;, &quot;set&quot;: &quot;/last&quot; },
			{ &quot;op&quot;: &quot;wb-first&quot;, &quot;path&quot;: &quot;/rootArray&quot;, &quot;set&quot;: &quot;/first&quot; },
			{ &quot;op&quot;: &quot;wb-toDateISO&quot;, &quot;path&quot;: &quot;/last/created_at&quot;, &quot;set&quot;: &quot;/oldest&quot; },
			{ &quot;op&quot;: &quot;wb-toDateISO&quot;, &quot;path&quot;: &quot;/first/created_at&quot;, &quot;set&quot;: &quot;/recent&quot; },
			{ &quot;op&quot;: &quot;add&quot;, &quot;path&quot;: &quot;/unhideme&quot;, &quot;value&quot;: &quot;hidden&quot; }
		],
		&quot;wraproot&quot;: &quot;rootArray&quot;
	}'&gt;

	&lt;h4 class=&quot;mrgn-tp-sm&quot;&gt;Overview&lt;/h4&gt;

	&lt;ul class=&quot;list-unstyled&quot;&gt;
		&lt;li&gt;Number of issues: &lt;span data-json-replace=&quot;#[github]/nbissues&quot;&gt;&lt;/span&gt;&lt;/li&gt;
		&lt;li&gt;Most recent issue: &lt;a class=&quot;hidden&quot; data-wb-json='[
				{
					&quot;url&quot;: &quot;#[github]/first/title&quot;,
					&quot;type&quot;: &quot;replace&quot;
				},
				{
					&quot;url&quot;: &quot;#[github]/first/html_url&quot;,
					&quot;type&quot;: &quot;attr&quot;,
					&quot;attr&quot;: &quot;href&quot;
				},
				{
					&quot;url&quot;: &quot;#[github]/unhideme&quot;,
					&quot;type&quot;: &quot;removeclass&quot;
				}
			]'&gt;&lt;/a&gt; (&lt;span data-json-replace=&quot;#[github]/recent&quot;&gt;unknown&lt;/span&gt;)&lt;/li&gt;
		&lt;li&gt;Oldest issue: &lt;a class=&quot;hidden&quot; data-wb-json='[
				{
					&quot;url&quot;: &quot;#[github]/last/title&quot;,
					&quot;type&quot;: &quot;replace&quot;
				},
				{
					&quot;url&quot;: &quot;#[github]/last/html_url&quot;,
					&quot;type&quot;: &quot;attr&quot;,
					&quot;attr&quot;: &quot;href&quot;
				},
				{
					&quot;url&quot;: &quot;#[github]/unhideme&quot;,
					&quot;type&quot;: &quot;removeclass&quot;
				}
			]'&gt;&lt;/a&gt; (&lt;span data-json-replace=&quot;#[github]/oldest&quot;&gt;unknown&lt;/span&gt;)&lt;/li&gt;
	&lt;/ul&gt;
	&lt;p&gt;&lt;a href=&quot;https://github.com/wet-boew/wet-boew/issues?q=is%3Aopen+is%3Aissue+label%3A%22Work%3A+Accessibility%22&quot;&gt;View open issues on GitHub&lt;/a&gt;&lt;/p&gt;
&lt;/aside&gt;
&lt;/div&gt;

&lt;p&gt;List of issues:&lt;/p&gt;

&lt;div data-wb-jsonmanager='{
		&quot;url&quot;: &quot;https://api.github.com/repos/wet-boew/wet-boew/issues?labels=General%3A+Accessibility&quot;,
		&quot;name&quot;: &quot;github-src&quot;,
		&quot;patches&quot;: [

			{ &quot;op&quot;: &quot;wb-toDateISO&quot;, &quot;path&quot;: &quot;/updated_at&quot; }
		]
	}'&gt;&lt;/div&gt;

&lt;ul data-wb-json='{
		&quot;url&quot;: &quot;#[github-src]&quot;,
		&quot;mapping&quot;: [
			{ &quot;selector&quot;: &quot;a&quot;, &quot;value&quot;: &quot;/title&quot; },
			{ &quot;selector&quot;: &quot;a&quot;, &quot;value&quot;: &quot;/html_url&quot;, &quot;attr&quot;: &quot;href&quot; },
			{ &quot;selector&quot;: &quot;span&quot;, &quot;value&quot;: &quot;/updated_at&quot; }
		]
	}'&gt;
	&lt;template&gt;
		&lt;li&gt;(&lt;span&gt;&lt;/span&gt;) &lt;a href=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;/template&gt;
&lt;/ul&gt;</code></pre>


</details>

<h3>Work Accessibility issue <small>WET-BOEW on GitHub</small></h3>

<div class="row">
<aside id="aside" class="col-md-8 col-md-push-2 well" data-wb-jsonmanager='{
		"url": "https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility",
		"name": "github",
		"patches": [
			{ "op": "wb-count", "path": "/rootArray", "set": "/nbissues" },
			{ "op": "wb-last", "path": "/rootArray", "set": "/last" },
			{ "op": "wb-first", "path": "/rootArray", "set": "/first" },
			{ "op": "wb-toDateISO", "path": "/last/created_at", "set": "/oldest" },
			{ "op": "wb-toDateISO", "path": "/first/created_at", "set": "/recent" },
			{ "op": "add", "path": "/unhideme", "value": "hidden" }
		],
		"wraproot": "rootArray"
	}'>

	<h4 class="mrgn-tp-sm">Overview</h4>

	<ul class="list-unstyled">
		<li>Number of issues: <span data-json-replace="#[github]/nbissues"></span></li>
		<li>Most recent issue: <a class="hidden" data-wb-json='[
				{
					"url": "#[github]/first/title",
					"type": "replace"
				},
				{
					"url": "#[github]/first/html_url",
					"type": "attr",
					"attr": "href"
				},
				{
					"url": "#[github]/unhideme",
					"type": "removeclass"
				}
			]'></a> (<span data-json-replace="#[github]/recent">unknown</span>)</li>
		<li>Oldest issue: <a class="hidden" data-wb-json='[
				{
					"url": "#[github]/last/title",
					"type": "replace"
				},
				{
					"url": "#[github]/last/html_url",
					"type": "attr",
					"attr": "href"
				},
				{
					"url": "#[github]/unhideme",
					"type": "removeclass"
				}
			]'></a> (<span data-json-replace="#[github]/oldest">unknown</span>)</li>
	</ul>
	<p><a href="https://github.com/wet-boew/wet-boew/issues?q=is%3Aopen+is%3Aissue+label%3A%22Work%3A+Accessibility%22">View open issues on GitHub</a></p>
</aside>
</div>

<p>List of issues:</p>

<div data-wb-jsonmanager='{
		"url": "https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Work%3A+Accessibility",
		"name": "github-src",
		"patches": [

			{ "op": "wb-toDateISO", "path": "/updated_at" }
		]
	}'></div>

<ul data-wb-json='{
		"url": "#[github-src]",
		"mapping": [
			{ "selector": "a", "value": "/title" },
			{ "selector": "a", "value": "/html_url", "attr": "href" },
			{ "selector": "span", "value": "/updated_at" }
		]
	}'>
	<template>
		<li>(<span></span>) <a href=""></a></li>
	</template>
</ul>

<h3>Content of a GitHub file</h3>
<p>Calling a file through GitHub API has to be crafted as such:</p>
<pre><code>https://api.github.com/repos/[Organisation-Name]/[Repository-Name]/contents/[Path-to-file]</code></pre>
<p><strong>Note:</strong> Take into consideration that GitHub has a rate limit for API usage, which is currently set to 60 per hour (without authentication).</p>
<div data-wb-jsonmanager='{
		"url": "https://api.github.com/repos/wet-boew/wet-boew/contents/src/plugins/data-ajax/ajax/data-ajax-extra-en.html",
		"name": "githubCode",
		"patches": [
			{ "op": "wb-decodeUTF8Base64", "path": "/content", "set": "/raw" },
			{ "op": "copy", "from": "/raw", "path": "/escape" },
			{ "op": "wb-escapeHTML", "path": "/escape" }
		]
	}'>
	<div data-json-replace="#[githubCode]/raw">Content here...</div>
	<h4>Escaped HTML content</h4>
	<pre><code data-json-append="#[githubCode]/escape"></code></pre>
</div>

<details>
<summary>View source code</summary>
<pre><code>&lt;div data-wb-jsonmanager=&apos;{
	&quot;url&quot;: &quot;https://api.github.com/repos/wet-boew/wet-boew/contents/src/plugins/data-ajax/ajax/data-ajax-extra-en.html&quot;,
	&quot;name&quot;: &quot;githubCode&quot;,
	&quot;patches&quot;: [
		{ &quot;op&quot;: &quot;wb-decodeUTF8Base64&quot;, &quot;path&quot;: &quot;/content&quot;, &quot;set&quot;: &quot;/raw&quot; },
		{ &quot;op&quot;: &quot;copy&quot;, &quot;from&quot;: &quot;/raw&quot;, &quot;path&quot;: &quot;/escape&quot; },
		{ &quot;op&quot;: &quot;wb-escapeHTML&quot;, &quot;path&quot;: &quot;/escape&quot; }
	]
}&apos;&gt;
&lt;div data-json-replace=&quot;#[githubCode]/raw&quot;&gt;Content here...&lt;/div&gt;
&lt;h4&gt;Escaped HTML version&lt;/h4&gt;
&lt;pre&gt;&lt;code data-json-append=&quot;#[githubCode]/escape&quot;&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;</code></pre>
</details>

<h2>JSON patches operation</h2>

<p>JSON operation is defined as per <a href="https://tools.ietf.org/html/rfc6902">RFC6002 - JavaScript Object Notation (JSON) Patch</a> with additional operation to fulfil the needs of the JSON manager. Described in the documentation, the following operation are supported by default: <code>add</code>, <code>remove</code>, <code>replace</code>, <code>move</code>, <code>copy</code>, <code>test</code>, <code>wb-count</code>, <code>wb-first</code>, <code>wb-last</code>, <code>wb-decodeUTF8Base64</code>, <code>wb-escapeHTML</code>, <code>wb-toDateISO</code> and <code>wb-toDateTimeISO</code>.</p>

<h2>Debugging</h2>

<p>You can set the configuration option <code>&quot;debug&quot;: true</code> to show next to the json manager the modified JSON object with the applied patches. The JSON content are displayed without formatting.</p>

<p data-wb-jsonmanager='{
	"url": "demo/data-en.json",
	"name": "example3",
	"patches": { "op": "wb-count", "path": "/products", "set": "/nbproduct" },
	"debug": true
}'>Number of products: <span data-json-replace="#[example3]/nbproduct">Not available</span></p>

<details>
	<summary>View source code</summary>
<pre><code>&lt;p data-wb-jsonmanager='{
	&quot;url&quot;: &quot;demo/data-en.json&quot;,
	&quot;name&quot;: &quot;example3&quot;,
	&quot;patches&quot;: { &quot;op&quot;: &quot;wb-count&quot;, &quot;path&quot;: &quot;/products&quot;, &quot;set&quot;: &quot;/nbproduct&quot; },
	&quot;debug&quot;: true
}'&gt;Number of products: &lt;span data-json-replace=&quot;#[example3]/nbproduct&quot;&gt;Not available&lt;/span&gt;&lt;/p&gt;</code></pre>
</details>

<h2>Extract the data from the DOM nodes to build the data source JSON object</h2>
<p>Use <code>replace</code> and <code>mapping</code> on the same JSON data source</p>
<div data-wb-jsonmanager='{
		"name": "ex1",
		"extractor": [
						{ "selector": "title", "path": "pageTitle" },
						{ "selector": "h2", "path": "firstH2" },
						{ "selector": "h4", "path": "allH4", "selectAll": true }
					],
		"wraproot": "rootArray"
}'>
	<p> The page title is: <span data-json-replace="#[ex1]/rootArray/pageTitle">Not available</span></p>
	<p> The first H2 is: <span data-json-replace="#[ex1]/rootArray/firstH2">Not available</span></p>
	<p>All h4 from the page:</p>
	<ul data-wb-json='{
						"url": "#[ex1]/rootArray/allH4",
						"mapping": [
							{ "selector": "li" }
						]
					}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

<details>
	<summary>View source code</summary>
<pre><code>
&lt;div data-wb-jsonmanager='{
		&quot;name&quot;: &quot;ex1&quot;,
		&quot;extractor&quot;: [
			{ &quot;selector&quot;: &quot;title&quot;, &quot;path&quot;: &quot;pageTitle&quot; },
			{ &quot;selector&quot;: &quot;h2&quot;, &quot;path&quot;: &quot;firstH2&quot; },
			{ &quot;selector&quot;: &quot;h4&quot;, &quot;path&quot;: &quot;allH4&quot;, &quot;selectAll&quot;: true }
		],
		&quot;wraproot&quot;: &quot;rootArray&quot;
	}'&gt;
	&lt;p&gt;The page title is: &lt;span data-json-replace=&quot;#[ex1]/rootArray/pageTitle&quot;&gt;Not available&lt;/span&gt;&lt;/p&gt;
	&lt;p&gt;The first H2 is: &lt;span data-json-replace=&quot;#[ex1]/rootArray/firstH2&quot;&gt;Not available&lt;/span&gt;&lt;/p&gt;
	&lt;p&gt;All H4 from the page:&lt;/p&gt;
	&lt;ul data-wb-json='{
			&quot;url&quot;: &quot;#[ex1]/rootArray/allH4&quot;,
			&quot;mapping&quot;: [
				{ &quot;selector&quot;: &quot;li&quot; }
			]
		}'&gt;
		&lt;template&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/template&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>
</details>

<h3>Grouping selectors on the same JSON data source</h3>
<p>The description list below is the source of the combined selectors:</p>
<dl data-dl="test">
	<dt data-td="data-title-1">Title 1</dt>
	<dd>Description 1</dd>

	<dt data-td="data-title-2">Title 2</dt>
	<dd>Description 2</dd>

	<dt>Title 3</dt>
	<dd>Description 3</dd>
</dl>

<div data-wb-jsonmanager='{
		"name": "ex2",
		"url": "demo/data-en.json",
		"extractor": [
						{ "selector": "title", "path": "pageTitle" },
						{ "selector": "h2", "path": "firstH2" },
						{
							"selector": "dl[data-dl]",
							"path": "myGroup",
							"extractor": [
								{
									"selector": "dt",
									"path": "title",
									"attr":"data-td"
								},
								{
									"selector": "dd",
									"path": "desc"
								}
							]
						}
					]
		}'>
	<p>Output in a table the combined selectors values :</p>
	<table class="table table-striped">
		<thead>
			<tr data-wb-json='{
				"url": "#[ex2]/myGroup",
				"mapping": [
					{ "selector": "th", "value": "/title" }
				]
				}'>
				<template>
					<th></th>
				</template>
			</tr>
		</thead>
		<tbody>
			<tr data-wb-json='{
				"url": "#[ex2]/myGroup",
				"mapping": [
					{ "selector": "td", "value": "/desc" }
				]
				}'>
				<template>
					<td></td>
				</template>
			</tr>
		</tbody>
	</table>
	<p> The page title is: <span data-json-replace="#[ex2]/pageTitle">Not available</span></p>
	<p> The first H2 is: <span data-json-replace="#[ex2]/firstH2">Not available</span></p>
</div>
<details>
	<summary>View source code</summary>

	<h3>HTML</h3>
	<pre><code>
&lt;div data-wb-jsonmanager='{
		&quot;name&quot;: &quot;ex2&quot;,
		&quot;url&quot;: &quot;demo/data-en.json&quot;,
		&quot;extractor&quot;: &#91;
			{ &quot;selector&quot;: &quot;title&quot;, &quot;path&quot;: &quot;pageTitle&quot; },
			{ &quot;selector&quot;: &quot;h2&quot;, &quot;path&quot;: &quot;firstH2&quot; },
			{
				&quot;selector&quot;: &quot;dl&#91;data-dl&#93;&quot;,
				&quot;path&quot;: &quot;myGroup&quot;,
				&quot;extractor&quot;: &#91;
					{
						&quot;selector&quot;: &quot;dt&quot;,
						&quot;path&quot;: &quot;title&quot;,
						&quot;attr&quot;:&quot;data-td&quot;
					},
					{
						&quot;selector&quot;: &quot;dd&quot;,
						&quot;path&quot;: &quot;desc&quot;
					}
				&#93;
			}
		&#93;
	}'&gt;

	&lt;p&gt;Output in a table the combined selectors values :&lt;/p&gt;
	&lt;table class=&quot;table table-striped&quot;&gt;
		&lt;thead&gt;
			&lt;tr data-wb-json='{
				&quot;url&quot;: &quot;#[ex2]/myGroup&quot;,
				&quot;mapping&quot;: [
					{ &quot;selector&quot;: &quot;th&quot;, &quot;value&quot;: &quot;/title&quot; }
				]
				}'&gt;
				&lt;template&gt;
					&lt;th&gt;&lt;/th&gt;
				&lt;/template&gt;
			&lt;/tr&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;
			&lt;tr data-wb-json='{
				&quot;url&quot;: &quot;#[ex2]/myGroup&quot;,
				&quot;mapping&quot;: [
					{ &quot;selector&quot;: &quot;td&quot;, &quot;value&quot;: &quot;/desc&quot; }
				]
				}'&gt;
				&lt;template&gt;
					&lt;td&gt;&lt;/td&gt;
				&lt;/template&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
	&lt;p&gt; The page title is: &lt;span data-json-replace=&quot;#[ex2]/pageTitle&quot;&gt;Not available&lt;/span&gt;&lt;/p&gt;
	&lt;p&gt; The first H2 is: &lt;span data-json-replace=&quot;#[ex2]/firstH2&quot;&gt;Not available&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;</code></pre>
</details>

<h3>Extract values from tag attributes or extract all specific tags values:</h3>
<div data-wb-jsonmanager='{
		"name": "ex3",
		"extractor": [

						{ "path": "/formfields/pageTitle", "selector": "title" },
						{ "path": "/formfields/lang", "attr":"lang", "selector": "html" },
						{ "path": "/formfields/externalReferer", "interface": "referer" },
						{ "path": "/formfields/submissionPage", "interface": "locationHref" },
						{ "selector": "h2", "path": "allH2", "selectAll":true },
						{ "selector": "h3", "path": "allH3", "selectAll":true },
						{ "selector": "h1[data-not-found]", "path": "notfound" }
					],
		"patches": { "op": "wb-count", "path": "/allH3", "set": "/nbH3Total" }
		}'>
	<div data-wb-json='{
						"url": "#[ex3]/formfields",
						"mapping": [
							{ "selector": "input", "attr": "name", "value": "/@id" },
							{ "selector": "input", "attr": "value", "value": "/@value" }
						]
					}'>
		<template>
			<input type="text" name="" value="">
		</template>
	</div>

	<p>All H2 from the page:</p>
	<ul data-wb-json='{
		"url": "#[ex3]/allH2",
		"mapping": [
			{ "selector": "li" }
		]
	}'>
		<template>
			<li></li>
		</template>
	</ul>

	<p>All H3 from the page (<span data-json-replace="#[ex3]/nbH3Total">unknown</span> instances):</p>
	<ul data-wb-json='{
						"url": "#[ex3]/allH3",
						"mapping": [
							{ "selector": "li" }
						]
					}'>
		<template>
			<li></li>
		</template>
	</ul>
	<p>Returning a <code>null</code> value when the element is not found by the CSS selector. Test (expect to return 'working'):
		<span data-wb-json='{
				"url": "#[ex3]",
				"streamline": true,
				"mapping": [
					{
						"template": "[data-not-found-result]",
						"test": "fn:guessType",
						"assess": "/notfound",
						"expect": "undefined",
						"mapping": null
					}
				]
			}'>
			<template data-not-found-result>
				working
			</template>
		</span>
	</p>
</div>

<details>
	<summary>View source code</summary>

	<h3>HTML</h3>
	<pre><code>
&lt;div data-wb-jsonmanager='{
		&quot;name&quot;: &quot;ex3&quot;,
		&quot;extractor&quot;: [
			{ &quot;path&quot;: &quot;/formfields/pageTitle&quot;, &quot;selector&quot;: &quot;title&quot; },
			{ &quot;path&quot;: &quot;/formfields/lang&quot;, &quot;attr&quot;:&quot;lang&quot;, &quot;selector&quot;: &quot;html&quot; },
			{ &quot;path&quot;: &quot;/formfields/externalReferer&quot;, &quot;interface&quot;: &quot;referer&quot; },
			{ &quot;path&quot;: &quot;/formfields/submissionPage&quot;, &quot;interface&quot;: &quot;locationHref&quot; },
			{ &quot;selector&quot;: &quot;h2&quot;, &quot;path&quot;: &quot;allH2&quot;, &quot;selectAll&quot;:true },
			{ &quot;selector&quot;: &quot;h3&quot;, &quot;path&quot;: &quot;allH3&quot;, &quot;selectAll&quot;:true }
		],
		&quot;patches&quot;: { &quot;op&quot;: &quot;wb-count&quot;, &quot;path&quot;: &quot;/allH3&quot;, &quot;set&quot;: &quot;/nbH3Total&quot; }
	}'&gt;

	&lt;div data-wb-json='{
			&quot;url&quot;: &quot;#[ex3]/formfields&quot;,
			&quot;mapping&quot;: [
				{ &quot;selector&quot;: &quot;input&quot;, &quot;attr&quot;: &quot;name&quot;, &quot;value&quot;: &quot;/@id&quot; },
				{ &quot;selector&quot;: &quot;input&quot;, &quot;attr&quot;: &quot;name&quot;, &quot;value&quot;: &quot;/@value&quot; }
			]
		}'&gt;
		&lt;template&gt;
			&lt;input type=&quot;text&quot; name=&quot;&quot; value=&quot;&quot; &gt;
		&lt;/template&gt;
	&lt;/div&gt;
	&lt;p&gt;All H2 from the page:&lt;/p&gt;
	&lt;ul data-wb-json='{
						&quot;url&quot;: &quot;#[ex3]/allH2&quot;,
						&quot;mapping&quot;: [
							{ &quot;selector&quot;: &quot;li&quot; }
						]
					}'&gt;
		&lt;template&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/template&gt;
	&lt;/ul&gt;
	&lt;p&gt;All H3 from the page (&lt;span data-json-replace=&quot;#[ex3]/nbH3Total&quot;&gt;unknown&lt;/span&gt; instances):&lt;/p&gt;
	&lt;ul data-wb-json='{
						&quot;url&quot;: &quot;#[ex3]/allH3&quot;,
						&quot;mapping&quot;: [
							{ &quot;selector&quot;: &quot;li&quot; }
						]
					}'&gt;
		&lt;template&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/template&gt;
	&lt;/ul&gt;
	&lt;p&gt;Returning a &lt;code&gt;null&lt;/code&gt; value when the element is not found by the CSS selector. Test (expect to return 'working'):
		&lt;span data-wb-json='{
				&quot;url&quot;: &quot;#[ex3]&quot;,
				&quot;streamline&quot;: true,
				&quot;mapping&quot;: [
					{
						&quot;template&quot;: &quot;[data-not-found-result]&quot;,
						&quot;test&quot;: &quot;fn:guessType&quot;,
						&quot;assess&quot;: &quot;/notfound&quot;,
						&quot;expect&quot;: &quot;undefined&quot;,
						&quot;mapping&quot;: null
					}
				]
			}'&gt;
			&lt;template data-not-found-result&gt;
				working
			&lt;/template&gt;
		&lt;/span&gt;
	&lt;/p&gt;
&lt;/div&gt;</code></pre>
</details>

<h2>Special test case examples</h2>
<p><a href="test-case-en.html">Consult the special test case examples webpage</a></p>
